<?php
$colourmod = true;
require_once LAYOUTPATH.'layout_header.php';

function custom_checked($with, $bricabox, $default = false)
{
	if ($bricabox->customize_with == $with || ($default && $bricabox->customize_with == 'none'))
		echo ' checked="checked"';
	
	echo ' onclick="$(\'#custom_group_\'+current_group).hide();$(\'#custom_group_'.$with.'\').show();current_group=\''.$with.'\';"';
}

function theme_dir($theme)
{
	return "assets/themes/".url_title($theme->name, 'underscore')."/"; // no leading slash to play nice with cache_killer()
}
?>

<h1><?php echo $page_title; ?></h1>

<div id="bricabox_tabs" class="admin">
	<ul>
		<li class="back"><a href="/">&lsaquo; Back to your BricaBox</a></li>
		<?php render_tabs($admin_tabs); ?>
	</ul>
	<ul id="sub_tabs">
		<li><a href="/admin/general/basic">Basic</a></li>
		<li><a href="/admin/general/terms">Interaction</a></li>
		<li class="current"><a href="/admin/general/appearance">Appearance</a></li>
		<li><a href="/admin/general/domain">Domain name</a></li>
	</ul>
</div>

<?php require_once FLASHPARTIAL; ?>

<script type="text/javascript" charset="utf-8">
	var current_theme_id = <?php echo $bricabox->theme_id == 0 ? 1 : $bricabox->theme_id; ?>;
</script>

<form action="/bricabox/<?php echo $bricabox->id; ?>/save" method="post">
	<input type="hidden" name="section" value="general" />
	<input type="hidden" name="view" value="appearance" />
	<fieldset>
		<div class="opt_group">
			<label for="custom_theme"><input<?php custom_checked('theme', $bricabox, true); ?> type="radio" name="bricabox[customize_with]" id="custom_theme" value="theme" />
				I want to use a BricaBox Theme</label>
			<div class="inner" id="custom_group_theme" style="display: none;">
				<?php
				$i = 0;
				foreach ($themes->result() as $theme):
					$_theme_dir 	= theme_dir($theme);
					$current_theme 	= ($theme->id == $bricabox->theme_id || (!$bricabox->theme_id && $theme->id == 1));
					$i++;
				?>
				<div class="theme<?php if ($current_theme) echo ' current'; ?>" id="theme_<?php echo $theme->id; ?>">
					<h4><?php echo $theme->name; ?></h4>
					<h5>by <a href="<?php echo prep_url($theme->author_url); ?>" target="_blank"><?php echo $theme->author_name; ?></a></h5>
					<img onclick="$('#theme_id_<?php echo $theme->id; ?>').click();" src="<?php echo cache_killer(theme_dir($theme).'thumb.png'); ?>" alt="Thumbnail of this theme" />
					<div class="theme_selector">
						<input type="radio" name="bricabox[theme_id]" id="theme_id_<?php echo $theme->id; ?>" value="<?php echo $theme->id; ?>"<?php if ($current_theme) echo ' checked="checked"'; ?> onclick="Admin.chooseTheme(<?php echo $theme->id; ?>, current_theme_id);current_theme_id=<?php echo $theme->id; ?>;" />
					</div>
				</div>
				<?php
				if ($i == 4): // wrap after four themes (four per row)
					$i = 1;
				?>
				<div class="clearfix"></div>
				<?php endif; ?>
				
				<?php endforeach; ?>
			</div>
		</div>
		
		<div class="opt_group">
			<label for="custom_colors"><input<?php custom_checked('colors', $bricabox); ?> type="radio" name="bricabox[customize_with]" id="custom_colors" value="colors" />
				I want to pick custom colors for my BricaBox</label>
			<div class="inner" id="custom_group_colors" style="display: none;">
				<?php
				$color_fields = array(
					'page_bg'			=> 'Page background color',
					'text' 				=> 'Page text',
					'links'				=> 'Page links',
					'header_text' 		=> 'Color for page headings',
					'description_text' 	=> 'Color for description text',
					'subnav_text'		=> 'Alternate background color for entry list',
					'tab_bg'			=> 'Navigation tab background color',
					'tab_text'			=> 'Navigation tab text color',
					'tab_bg_on'			=> 'Current navigation tab background color',
					'tab_text_on'		=> 'Current navigation tab text color',
					'engagement_bg'		=> 'Interaction block background color',
					'engagement_text'	=> 'Interaction block text color'
				);
				?>
				
				<?php
				foreach ($color_fields as $cfield => $clabel):
					$_m  = "color_for_{$cfield}";
					$val = $bricabox->$_m;
				?>
				<div>
					<style type="text/css" media="screen">
						#swatch_for_<?php echo $_m; ?> { background-color: #<?php echo $val; ?>; }
					</style>
					<label for="<?php echo $_m; ?>"><?php echo $clabel; ?>:</label><br />
					#<input onchange="var el=$('#swatch_for_<?php echo $_m; ?>');if (this.value=='') this.value='fff';el.css('backgroundColor', '#'+this.value);frames['index_preview_iframe'].location.reload();" type="text" id="<?php echo $_m; ?>" name="bricabox[<?php echo $_m; ?>]" value="<?php echo $val; ?>" maxlength="6" size="8" />
					<a href="#" class="swatch" onclick="pickcolor('#swatch_for_<?php echo $_m; ?>','backgroundColor','','<?php echo $_m; ?>',this,15,15); return false;">
						<span id="swatch_for_<?php echo $_m; ?>"><?php echo str_repeat('&nbsp;', 8); ?></span>
							<img src="/assets/images/icons/color_wheel.png" alt="Choose a color" /></a>
					<script type="text/javascript" charset="utf-8">
						var el = $('#<?php echo $_m; ?>');
						if (el.val() == "")
							el.val('fff');
					</script>
				</div>
				<?php endforeach; ?>
				
				<div id="index_preview">
					<a href="#" onclick="frames['index_preview_iframe'].location.reload();return false;">Refresh preview</a><br />
					<iframe name="index_preview_iframe" src="/" width="570px" height="400px" scrolling="no" frameborder="0"></iframe>
				</div>
			</div>
		</div>
		
		<div class="opt_group">
			<label for="full_html_css"><input<?php custom_checked('html_css', $bricabox); ?> type="radio" name="bricabox[customize_with]" id="full_html_css" value="html_css" />
				I want to provide my own HTML and CSS for this BricaBox</label>
			<div class="inner" id="custom_group_html_css" style="display: none;">

				<div>
					<label for="custom_html">Paste your custom header HTML below:</label><br />
					<textarea name="bricabox[custom_header_html]" id="custom_html" rows="18" cols="75"><?php echo $bricabox->custom_header_html; ?></textarea>
				</div>

				
				<div>
					<label for="custom_css">Paste your custom CSS below:</label><br />
					<textarea name="bricabox[custom_css]" id="custom_css" rows="18" cols="75"><?php echo $bricabox->custom_css; ?></textarea>
				</div>
			</div>
		</div>
		
		<div class="controls">
			<input type="submit" value="Save changes" />
			or <a href="/admin">cancel</a>
		</div>
	</fieldset>
</form>

<script type="text/javascript" charset="utf-8">
	<?php $_initial = $bricabox->customize_with == 'none' ? 'theme' : $bricabox->customize_with; ?>
	$('#custom_group_<?php echo $_initial; ?>').show();
	var current_group = "<?php echo $bricabox->customize_with; ?>";
</script>

<?php require_once LAYOUTPATH.'layout_footer.php'; ?>